<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="../public/css/normalize.css" rel="stylesheet" type="text/css">
    <link href="./css/tooltips.css" rel="stylesheet" type="text/css">
    <script src="../public/js/jquery-1.11.3.min.js"></script>
    <script src="./js/tooltips.js"></script>
</head>
<body>
    <div style="">
        <ul style="width: 50%;margin: 80px auto;">
            <li class="left" data-position="left">左边</li>
            <li class="right" data-position="right">右边</li>
            <li class="top" data-position="top">上边</li>
            <li class="bottom" data-position="bottom">下边</li>
            <li class="center" data-position="center">中间</li>
            <li class="center" data-position="">中间</li>
        </ul>
    </div>
<!--<div class="popover right">
    <div class="arrow">
    </div>

    <div class="popover-inner">
        <div class="popover-content">
        </div>
    </div>

</div>-->
<script>
    $('ul li').on('click', function (event) {
        var seft     = $(this)
        var position = $(this).data('position')

        tooltips(seft,event,position)

//        seft.off('click')
        event.stopPropagation()
    })
</script>
</body>
</html>